<template>
    <div class="todayTask">
        <div class="boxTitle">
            <img src="@/assets/images/home/rightIcon.png" alt="">
            <span class="title">今日任务</span>
        </div>
        <div class="content">
            <div class="navBar">
                <div class="navItem">
                    <span class="item_label">巡检类型：</span>
                    <div class="item_content">
                        <template v-for="(item, index) in searchBar.list_type">
                            <span class="item_text" :class="{ 'item_text_active': index_type == index }"
                                @click="changeIndex_type(index)">
                                <span>{{ item.name }}</span>
                                <span v-if="item.num">({{ item.num }})</span>
                            </span>
                        </template>
                    </div>
                </div>
                <div class="navItem">
                    <span class="item_label">巡检状态：</span>
                    <div class="item_content">
                        <template v-for="(item, index) in searchBar.list_status">
                            <span class="item_text" :class="{ 'item_text_active': index_status == index }"
                                @click="changeIndex_status(index)">
                                <span>{{ item.name }}</span>
                                <span v-if="item.num">({{ item.num }})</span>
                            </span>
                        </template>
                    </div>
                </div>
                <div class="navItem ">
                    <span class="item_label">巡检结果：</span>
                    <div class="item_content">
                        <template v-for="(item, index) in searchBar.list_result">
                            <span class="item_text" :class="{ 'item_text_active': index_result == index }"
                                @click="changeIndex_result(index)">
                                <span>{{ item.name }}</span>
                                <span v-if="item.num">({{ item.num }})</span>
                            </span>
                        </template>
                    </div>
                </div>
                <div class="navItem">
                    <span class="item_label">巡检结果：</span>
                    <div class="item_search">
                        <el-input v-model="inspectionItem" placeholder="" clearable></el-input>
                        <div class="btn">搜索</div>
                    </div>
                </div>
            </div>
            <div class="taskList">
                <div class="task_item" v-for="item in taskList.list">
                    <div class="task_head">
                        <div class="head_item">8:00~10:00(逾期)</div>
                        <div class="head_item head_item2">14:00~16:00(已巡检)</div>
                        <div class="head_item head_item3">20:00~22:00(未巡检)</div>
                    </div>
                    <div class="task_content">
                        <div class="content_top">
                            <span class="task_name">{{ item.name }}</span>
                            <span class="task_time">{{ item.time }}</span>
                            <span :class="item.status == 1 ? 'task_status' : 'task_status task_status2'">{{
                                item.status == 1 ? '正常' : '异常'
                                }}</span>
                        </div>
                        <div class="content_bot">
                            <span class="bot_item">巡检类型：设备间</span>
                            <span class="bot_item">巡检班组：锅炉A组</span>
                            <span class="bot_item">巡检人：李斯</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
let searchBar = reactive({
    list_type: [{ name: '全部', num: null }, { name: '设备间', num: 10 }, { name: '设备', num: 20 }, { name: '公区', num: 30 }],
    list_status: [{ name: '全部', num: null }, { name: '未巡检', num: 10 }, { name: '已巡检', num: 20 }, { name: '逾期', num: 30 }, { name: '待分配', num: 30 }],
    list_result: [{ name: '全部', num: null }, { name: '正常', num: 10 }, { name: '异常', num: 20 }]
})

let taskList = reactive({
    list: [
        { name: '冷却风机', type: '设备', group: '锅炉A组', person: '', time: '2024.5.18-2024.5.25', status: 1 },
        { name: '冷却风机', type: '设备', group: '锅炉A组', person: '', time: '2024.5.18-2024.5.25', status: 1 },
        { name: '冷却风机', type: '设备', group: '锅炉A组', person: '', time: '2024.5.18-2024.5.25', status: 1 },
        { name: '冷却风机', type: '设备', group: '锅炉A组', person: '', time: '2024.5.18-2024.5.25', status: 1 },
        { name: '冷却风机', type: '设备', group: '锅炉A组', person: '', time: '2024.5.18-2024.5.25', status: 2 },
        { name: '冷却风机', type: '设备', group: '锅炉A组', person: '', time: '2024.5.18-2024.5.25', status: 2 },
        { name: '冷却风机', type: '设备', group: '锅炉A组', person: '', time: '2024.5.18-2024.5.25', status: 1 },
    ]
})

let index_type = ref(0);//巡检类型选择下标
let index_status = ref(0);//巡检状态选择下标
let index_result = ref(0);//巡检结果选择下标

let inspectionItem = ref('');//巡检项目

//改变巡检类型选择
const changeIndex_type = (index: number) => {
    if (index_type.value != index) {
        index_type.value = index;
    }
}

//改变巡检状态选择
const changeIndex_status = (index: number) => {
    if (index_status.value != index) {
        index_status.value = index;
    }
}

//改变巡检结果选择
const changeIndex_result = (index: number) => {
    if (index_result.value != index) {
        index_result.value = index;
    }
}
</script>

<style lang="scss" scoped>
.todayTask {
    // transition: transform 0.5s ease;
    position: absolute;
    z-index: 999;
    background: url(@/assets/images/dailyMaintenance/l-bg-02.png) no-repeat;
    background-size: 100% 100%;
    left: vh(20);
    top: vh(355);
    width: vh(421);
    height: vh(615);
    font-size: vh(14);
    color: #FFFFFF;

    .boxTitle {
        img {
            width: vh(16);
            height: vh(14);
        }
    }

    .content {
        // padding: vh(6) vh(16) 0 vh(16);
        padding: vh(6) 0 0 vh(16);
        line-height: 1;

        .navBar {
            padding-right: vh(16);

            .navItem {
                display: flex;
                margin-bottom: vh(7);
                font-size: vh(12);
                color: #FFFFFF;
                line-height: vh(22);

                .item_label {
                    margin-right: vh(15);
                    width: vh(60);

                }

                .item_content {
                    .item_text {
                        margin-right: vh(16);
                        display: inline-block;
                        line-height: vh(22);
                        cursor: pointer;

                        &:last-child {
                            margin-right: 0;
                        }

                        &.item_text_active {
                            color: #00E4FF;
                            border-bottom: 1px solid #00E4FF;

                        }
                    }
                }

                .item_search {
                    display: flex;
                    flex: 1;
                    align-items: center;

                    :deep(.el-input) {
                        flex: 1;
                        margin-right: vh(20);
                        height: vh(18);

                        .el-input__wrapper {
                            background-color: rgba(11, 122, 155, 0.5);
                            box-shadow: none;
                            border: vh(1) solid #00BDE5;
                            border-radius: vh(3);

                            .el-input__inner {
                                color: #fff;
                                font-size: vh(11);
                                line-height: vh(22);
                                height: vh(22);
                            }
                        }
                    }

                    .btn {
                        width: vh(68);
                        height: vh(25);
                        display: inline-block;
                        line-height: vh(25);
                        border: 1px solid #00AABE;
                        border-radius: vh(4);
                        font-family: Source Han Sans CN;
                        font-weight: 400;
                        font-size: vh(12);
                        color: #FFFFFF;
                        text-align: center;
                        background: #00AABE;
                        cursor: pointer;
                    }
                }
            }
        }

        .taskList {
            height: vh(451);
            overflow: auto;

            .task_item {
                margin-bottom: vh(13);

                .task_head {
                    display: flex;

                    .head_item {
                        width: vh(119);
                        height: vh(21);
                        background: rgba(157, 39, 80, 0.5);
                        font-size: vh(11);
                        color: #FFFFFF;
                        line-height: vh(21);
                        margin-right: vh(1);
                        text-align: center;

                        &.head_item2 {
                            background: rgba(12, 148, 235, 0.5);
                        }

                        &.head_item3 {
                            background: rgba(207, 169, 114, 0.5);
                        }
                    }
                }

                .task_content {
                    padding-top: vh(12);
                    padding-left: vh(13);
                    width: vh(387);
                    height: vh(62);
                    background: linear-gradient(90deg, rgba(0, 227, 254, 0.3), rgba(0, 227, 254, 0));

                    .content_top {
                        display: flex;
                        align-items: center;
                        line-height: 1;

                        .task_name {
                            font-family: Source Han Sans CN;
                            font-weight: 500;
                            font-size: vh(14);
                            color: #FFFFFF;
                            width: vh(185);
                        }

                        .task_time {
                            width: vh(142);
                            font-weight: 400;
                            font-size: vh(12);
                            color: #D3D3D3;
                        }

                        .task_status {
                            width: vh(38);
                            height: vh(19);
                            background: rgba(0, 227, 254, 0.5);
                            border-radius: vh(10);
                            line-height: vh(19);
                            display: inline-block;
                            text-align: center;
                            font-size: vh(12);
                            &.task_status2 {
                                background: rgba(255, 50, 50, 0.5);
                            }
                        }
                    }

                    .content_bot {
                        font-family: Source Han Sans CN;
                        font-weight: 400;
                        font-size: vh(11);
                        color: #B2CDD7;
                        line-height: 1;
                        margin-top: vh(10);
                        .bot_item {
                            margin-right:vh(23);
                        }
                    }
                }
            }
        }
    }
}
</style>
